<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title></title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="assets/css/animate.min.css" rel="stylesheet"/>

    <!--  Paper Dashboard core CSS    -->
    <link href="assets/css/paper-dashboard.css" rel="stylesheet"/>

    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="assets/css/demo.css" rel="stylesheet" />

    <!--  Fonts and icons     -->
    <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> -->
    <link href="assets/css/themify-icons.css" rel="stylesheet">

</head>
<body>

<div class="wrapper" id="app">
	<div class="sidebar" data-background-color="white" data-active-color="danger">

    <!--
		Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
		Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
	-->

    <div class="sidebar-wrapper">
        <div class="logo">
            <a href="#" class="simple-text">
                宠物商品商店后台管理系统
            </a>
        </div>

        <ul class="nav">
            <li v-if="role===0||role===2">
                <a href="user.html">
                    <i class="ti-user"></i>
                    <p>用户管理</p>
                </a>
            </li>
            <li class="active" v-if="role===0">
                <a href="goods.html">
                    <i class="ti-shopping-cart-full"></i>
                    <p>商品管理</p>
                </a>
            </li>
            <li v-if="role===0||role===1">
                <a href="stock.html">
                    <i class="ti-truck"></i>
                    <p>商品库存管理</p>
                </a>
            </li>
            <li v-if="role===0">
                <a href="bill.html">
                    <i class="ti-clipboard"></i>
                    <p>账单管理</p>
                </a>
            </li>
            <li v-if="role===0||role===2">
                <a href="orders.html">
                    <i class="ti-file"></i>
                    <p>订单管理</p>
                </a>
            </li>
            <li v-if="role===0||role===2">
                <a href="message.html">
                    <i class="ti-comments"></i>
                    <p>留言管理</p>
                </a>
            </li>
            <li>
                <a href="../login.html">
                    <i class="ti-settings"></i>
                    <p>退出登录</p>
                </a>
            </li>
        </ul>
    </div>
    </div>

    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">商品管理</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">
                                <i class="ti-user"></i>
                                <p>{{userName}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>


        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">商品列表</h4>
                            </div>
                            <div style="margin: 10px;">
                                <button class="btn btn-success" data-toggle="modal" data-target="#insert" style="float: right;">新增</button>
                                <form action="*" onsubmit="return false">
                                    <div class="nav-search">
                                        <div class="input-group">
                                            <input type="text" class="form-control" v-model="shopName" style="float: left;width: 200px;margin-right: 10px;" placeholder="请输入商品名称...">
                                            <select v-model="oneClassification" class="form-control" style="float: left;width: 200px;margin-right: 10px;">
                                                <option disabled selected value="">- 请选择大类</option>
                                                <option value="狗狗专区">狗狗专区</option>
                                                <option value="猫咪专区">猫咪专区</option>
                                                <option value="鸟儿专区">鸟儿专区</option>
                                                <option value="龟、鱼专区">龟、鱼专区</option>
                                                <option value="鼠类专区">鼠类专区</option>
                                                <option value="兔子专区">兔子专区</option>
                                            </select>
                                            <select v-model="twoClassification" class="form-control" style="float: left;width: 200px;margin-right: 10px;">
                                                <option disabled selected value="">- 请选择二类</option>
                                                <option value="零食">零食</option>
                                                <option value="调养药品">调养药品</option>
                                                <option value="服装装饰">服装装饰</option>
                                                <option value="毛发护理">毛发护理</option>
                                                <option value="洗护清洁">洗护清洁</option>
                                                <option value="生活用品">生活用品</option>
                                                <option value="玩具">玩具</option>
                                                <option value="宠物笼子">宠物笼子</option>
                                            </select>
                                            <button class="btn btn-info" style="margin-right: 10px;" @click="reset">重置</button>
                                            <button class="btn btn-info" @click="getList">搜索</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="content table-responsive table-full-width" style="height: 800px;overflow-y: scroll;">
                                <table class="table table-striped">
                                    <thead>
                                    <th>ID</th>
                                    <th>商品大类</th>
                                    <th>商品二类</th>
                                    <th>商品名称</th>
                                    <th>进价</th>
                                    <th>卖价</th>
                                    <th>操作</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in selectList" :key="index">
                                        <td>{{item.id}}</td>
                                        <td>{{item.oneClassification}}</td>
                                        <td>{{item.twoClassification}}</td>
                                        <td>{{item.shopName}}</td>
                                        <td>{{item.purchasePrice}}</td>
                                        <td>{{item.salePrice}}</td>
                                        <td>
                                            <a style="cursor: pointer;color: #EB5E28;" data-toggle="modal" data-target="#edit" @click="edit(item.id)">编辑</a>
                                            <a style="cursor: pointer;color: red;" @click="del(item.id)">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
<!--                                <div>-->
<!--                                    <button class="btn btn-info" @click="()=>{-->
<!--                                        if(page>0){page-1}-->
<!--                                    }">上一页</button>-->
<!--                                    <span>{{page}}</span>-->
<!--                                    <button class="btn btn-info" @click="()=>{if(page<maxPage){page+1}}">下一页</button>-->
<!--                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="insert" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding: 30px;">
                <div>
                    <div class="card-body">
                        <h4 class="card-title">新增</h4>
                        <form class="forms-sample" action="*" onsubmit="return false" enctype="multipart/form-data">
                            <div class="form-group">
                                <label>商品大类</label>
                                <select v-model="insertForm.oneClassification" class="form-control" placeholder="请输入">
                                    <option value="狗狗专区">狗狗专区</option>
                                    <option value="猫咪专区">猫咪专区</option>
                                    <option value="鸟儿专区">鸟儿专区</option>
                                    <option value="龟、鱼专区">龟、鱼专区</option>
                                    <option value="鼠类专区">鼠类专区</option>
                                    <option value="兔子专区">兔子专区</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>商品二类</label>
                                <select v-model="insertForm.twoClassification" class="form-control" placeholder="请输入">
                                    <option value="零食">零食</option>
                                    <option value="调养药品">调养药品</option>
                                    <option value="服装装饰">服装装饰</option>
                                    <option value="毛发护理">毛发护理</option>
                                    <option value="洗护清洁">洗护清洁</option>
                                    <option value="生活用品">生活用品</option>
                                    <option value="玩具">玩具</option>
                                    <option value="宠物笼子">宠物笼子</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>商品名称</label>
                                <input type="text" v-model="insertForm.shopName" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>进价</label>
                                <input type="number" v-model="insertForm.purchasePrice" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>卖价</label>
                                <input type="number" v-model="insertForm.salePrice" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>库存</label>
                                <input type="number" v-model="insertForm.numberCount" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>图片</label>
                                <input type="file" v-model="insertForm.images" id="uploadImage" class="form-control" placeholder="请输入">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="js-notify btn btn-sm btn-app" data-notify-type="success" data-notify-align="center"
                            data-notify-message="新增成功！" type="button" data-dismiss="modal" @click="insert">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <!-- Modal -->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding: 30px;">
                <div>
                    <div class="card-body">
                        <h4 class="card-title">修改</h4>
                        <form class="forms-sample">
                            <div class="form-group" style="display: none">
                                <label>ID</label>
                                <input type="text" v-model="editForm.id" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>商品大类</label>
                                <select v-model="editForm.oneClassification" class="form-control" placeholder="请输入">
                                    <option value="狗狗专区">狗狗专区</option>
                                    <option value="猫咪专区">猫咪专区</option>
                                    <option value="鸟儿专区">鸟儿专区</option>
                                    <option value="龟、鱼专区">龟、鱼专区</option>
                                    <option value="鼠类专区">鼠类专区</option>
                                    <option value="兔子专区">兔子专区</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>商品二类</label>
                                <select v-model="editForm.twoClassification" class="form-control" placeholder="请输入">
                                    <option value="零食">零食</option>
                                    <option value="调养药品">调养药品</option>
                                    <option value="服装装饰">服装装饰</option>
                                    <option value="毛发护理">毛发护理</option>
                                    <option value="洗护清洁">洗护清洁</option>
                                    <option value="生活用品">生活用品</option>
                                    <option value="玩具">玩具</option>
                                    <option value="宠物笼子">宠物笼子</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>商品名称</label>
                                <input type="text" v-model="editForm.shopName" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>进价</label>
                                <input type="number" v-model="editForm.purchasePrice" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>卖价</label>
                                <input type="number" v-model="editForm.salePrice" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>库存</label>
                                <input type="number" v-model="editForm.numberCount" class="form-control" placeholder="请输入">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="js-notify btn btn-sm btn-app" data-notify-type="success" data-notify-align="center"
                            data-notify-message="修改成功！" type="button" data-dismiss="modal" @click="update">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
</div>


</body>
    <script src="assets/js/vue.min.js"></script>
    <!--   Core JS Files   -->
    <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="assets/js/bootstrap-checkbox-radio.js"></script>

	<!--  Charts Plugin -->
	<script src="assets/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="assets/js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin    -->
    <!---<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>--->

    <!-- Paper Dashboard Core javascript and methods for Demo purpose -->
	<script src="assets/js/paper-dashboard.js"></script>

	<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
	<script src="assets/js/demo.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                count:0,
                maxPage:0,
                userName:'',
                role:'',
                selectList:[],
                page:1,
                size:9999999,
                shopName:'',
                oneClassification:'',
                twoClassification:'',
                insertForm:{
                    oneClassification:'',
                    twoClassification:'',
                    shopName:'',
                    purchasePrice:null,
                    salePrice:null,
                    numberCount:null,
                    images:''
                },
                editForm:{
                    id:null,
                    oneClassification:'',
                    twoClassification:'',
                    shopName:'',
                    purchasePrice:null,
                    salePrice:null,
                    numberCount:null,
                    images:''
                }
            }
        },
        mounted() {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if(userInfo=="" || userInfo==null){
                alert("您还没有登录，请先登录后在进行操作！");
                window.location.href = '../login.html'
            };
            this.userName = userInfo.account
            this.role = userInfo.role
            this.getList()
        },
        methods: {
            getList(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/shop/queryByPage",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "shopName": that.shopName,
                        "oneClassification": that.oneClassification,
                        "twoClassification": that.twoClassification,
                    }),
                    success: function (data) {
                        // that.count = data.data.total
                        // that.maxPage = data.data.total / that.size
                        // if(data.data.total % that.size > 0){
                        //     that.maxPage = that.maxPage + 1
                        // }
                        that.selectList = data.data.list
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            reset(){
                this.shopName = ''
                this.oneClassification = ''
                this.twoClassification = ''
                this.getList()
            },
            insert(){
                const that = this
                var formData = new FormData()//创建formData对象
                //给formData对象中设置属性值，$("#uploadImage")[0].files[0]表示取得id为uploadImage的文件
                //append方法，formData.append(参数名，参数值)
                formData.append("file", $("#uploadImage")[0].files[0])
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/getShop/images",
                    contentType : false,//如果需要上传图片需要设置该属性为false
                    processData : false,//如果需要上传图片需要设置该属性为false
                    data: formData,
                    success: function (data) {

                    },
                    error: function (error) {
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            contentType: 'application/json',
                            url: "/shop/add",
                            data: JSON.stringify({
                                oneClassification: that.insertForm.oneClassification,
                                twoClassification: that.insertForm.twoClassification,
                                shopName: that.insertForm.shopName,
                                purchasePrice: that.insertForm.purchasePrice,
                                salePrice: that.insertForm.salePrice,
                                numberCount: that.insertForm.numberCount,
                                images:error.responseText
                            }),
                            success: function (data) {
                                that.getList()
                                that.insertForm.oneClassification = ''
                                that.insertForm.twoClassification = ''
                                that.insertForm.shopName = ''
                                that.insertForm.purchasePrice = null
                                that.insertForm.salePrice = null
                                that.insertForm.numberCount = null
                            },
                            error: function () {
                                alert("异常！");
                            }
                        });
                    }
                });

            },
            edit(id){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/shop/queryById",
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (data) {
                        that.editForm = data
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            update(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/shop/edit",
                    data: JSON.stringify({
                        id:that.editForm.id,
                        oneClassification: that.editForm.oneClassification,
                        twoClassification: that.editForm.twoClassification,
                        shopName: that.editForm.shopName,
                        purchasePrice: that.editForm.purchasePrice,
                        salePrice: that.editForm.salePrice,
                        numberCount: that.editForm.numberCount,
                    }),
                    success: function (data) {
                        that.getList()
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            del(id){
                const that = this
                if (confirm("确定要删除吗?")) {
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        contentType: 'application/json',
                        url: "/shop/deleteById",
                        data: JSON.stringify({
                            id:id
                        }),
                        success: function (data) {
                            alert("删除成功！");
                            that.getList()
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                }
            }
        }
    })
</script>
</html>
